import * as React from 'react';
import { IEditorDragMaterial, materialList } from '../data';
import { loadUrl } from '@/utils/Utils';
import './EditorMaterial.scss';
import { EditorModels } from '@/view/editor/ts/EditorModels';
import { EVENT_DRAG_TYPE, EnumDragType } from '../../EditorContent/EditorContent';
export interface IEditorMaterialProps {
  editorScene: EditorModels;
}

export default function EditorMaterial(props: IEditorMaterialProps) {
  /** 材质拖拽事件开始 */
  const materialDragStartHandle = (
    e: React.DragEvent<HTMLImageElement>,
    dragMaterial: IEditorDragMaterial,
  ) => {
    props.editorScene.$emit(EVENT_DRAG_TYPE, EnumDragType.MATERIAL_DRAG);
    const image = new Image();
    image.src = dragMaterial.imageUrl;
    image.width = 30;
    image.height = 30;
    image.onload = () => {
      e.dataTransfer.setDragImage(image, 0, 0);
      props.editorScene.setCurrentDragMaterial(dragMaterial.material);
    };
  };

  /** 材质拖拽事件结束 */
  const materialDragEndHandle = (
    e: React.DragEvent<HTMLImageElement>,
    dragMaterial: IEditorDragMaterial,
  ) => {
    const currentDragMaterial = props.editorScene.currentDragMaterial;
    if (currentDragMaterial) {
      props.editorScene.currentDragMaterial = null;
      props.editorScene.currentDragMesh = undefined;
    }
  };

  return (
    <div className="editorMaterial">
      {materialList.map((item) => {
        return (
          <div className="itemBox" key={item.name}>
            <img
              src={item.imageUrl}
              onDragStart={(e) => {
                materialDragStartHandle(e, item);
              }}
              onDragEnd={(e) => {
                materialDragEndHandle(e, item);
              }}
              draggable="true"
            />
            <div className="name">{item.name}</div>
          </div>
        );
      })}
    </div>
  );
}
